<script setup>
import { GetStatementListAPI } from "@/api/shopInspection/temporary";
const { proxy } = getCurrentInstance();
const router = useRouter();
/**
 * 字典查询
 */
const {
  task_status,
  hidden_dangers,
  task_source,
  self_examination_statsus,
  temporary_inspect,
} = proxy.useDict(
  "task_status",
  "hidden_dangers",
  "task_source",
  "self_examination_statsus",
  "temporary_inspect"
);

/**
 * 模糊查询枚举
 */
const selectList = ref([
  { type: "时间选择" },
  {
    label: "任务状态",
    model: "status",
    type: "下拉单选",
    opt: self_examination_statsus,
  },

  {
    label: "任务单号",
    model: "taskNo",
    type: "输入框",
  },
  {
    label: "安全员",
    model: "safetyManager",
    type: "输入框",
  },
]);
/**
 * 表单实例
 */
const ruleFormRef = ref(null);

/**
 * 表单
 */
const ruleForm = ref({});

/**
 * 表格枚举
 */
const columns = ref([
  { label: "任务单号", prop: "taskNo", width: "120" },
  { label: "创建时间", prop: "createTime", width: "150" },
  { label: "任务状态", prop: "status", width: "120" },
  { label: "安全管理员", prop: "safetyManager", width: "120" },
  { label: "任务来源", prop: "taskSource", width: "120" },
  { label: "隐患类型", prop: "hiddenDangerType", width: "120" },
  { label: "隐患描述", prop: "hiddenDangerDescription", width: "120" },
  { label: "检查项目", prop: "checkItem", width: "120" },
  { label: "检查标准", prop: "inspectionStandard", width: "120" },
  { label: "任务来源", prop: "taskSource", width: "120" },
  { label: "下发时间", prop: "deliveryTime", width: "120" },
  { label: "明细隐患描述", prop: "detailDangerDescription", width: "120" },
  { label: "整改情况", prop: "rectificationSituation", width: "120" },
  { label: "整改状态", prop: "rectificationStatus", width: "120" },
  { label: "计划时间", prop: "plannedTime", width: "120" },

  // { label: "限定整改完成日期", prop: "taskSource", width: "150" },
  { label: "部门负责人", prop: "leader", width: "120" },
  // { label: "回复时间", prop: "recoveryTime", width: "120" },
  { label: "图片地址", prop: "imageUrls", width: "120" },
  { label: "备注", prop: "remark", width: "120" },
]);

/**
 * 树结构
 */
const dataTree = ref([]);

/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: "新增",
  radio: "1",
  Single: false,
  row: [],
  ids: [],
  treeShow: false, //树结构弹窗
});
/**
 * 树结构枚举
 */
const defaultProps = {
  children: "children",
  label: "categoryName",
  value: "id",
};
/**
 * 按钮枚举
 */
const buttonList = ref([{ type: "export", hasPermi: "mold:edger:export" }]);

/**图片 */
const imageRef = ref();
/**
 * 表格数据
 */
const tableData = ref([]);

/**
 * 表单实例
 */
const submitFormRef = ref(null);

/**
 * 一级类别列表
 */
const categoryList = ref([]);
/**
 * 新增修改表单
 */
const submitForm = ref({});

/**
 * 查询表单
 */
const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

const data = ref([]);

/**
 * 表单校验
 */
const rules = reactive({
  userIds: [{ required: true, message: "请选择人员", trigger: "change" }],
});

/**
 * 弹窗关闭
 */
const closeDic = () => {
  state.isShow = false;
  state.treeShow = false;
  submitForm.value = {};
  ruleForm.value = {};
};

/** 导出按钮操作 */
const handleExport = () => {
  if (state.radio == 2 && state.row.length == 0)
    return proxy.warningMsg("请先选择要导出的数据");
  proxy?.download(
    "/web/temporarily/task/statementExport",
    state.radio == 2 ? { idStr: state.ids.join(","), ...query } : "",
    `临时任务${new Date().getTime()}.xlsx`
  );
  state.isShow = false;
};

/**
 * 删除
 */
const remove = async () => {
  const isif = await proxy.MessageBox("确定要清空吗？");
  if (!isif) return;
  try {
    proxy.loading("删除中，请稍后");
    await DelDataAPI();
    closeDic();
    proxy.successMsg("删除成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 模糊查询
 */
const selectSubmit = (val) => {
  Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]));
  query.startTime = query.beginTime;
  getList();
};

/**
 * 列表复选框
 */
const handleSelectionChange = ({ row, ids }) => {
  state.ids = ids;
  state.row = row;
};

/**
 * 删除列表
 */
const delTree = async (v) => {
  try {
    const isif = await proxy.MessageBox("是否删除？");
    if (!isif) return;
    proxy.loading("删除中，请稍后");
    await DelCategoryAPI(v.id);
    closeDic();
    proxy.successMsg("删除成功");
    getTreeList();
  } catch (err) {
    console.error(err);
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 查询列表
 */
const getList = async () => {
  try {
    state.loading = true;
    const { data: result } = await GetStatementListAPI(query);

    state.total = result.total;
    result.result.map((t) => {
      t.imageUrls = t.imageUrls ? JSON.parse(t.imageUrls) : [];
    });
    tableData.value = result.result;
  } catch (err) {
    console.error(err);
  } finally {
    state.loading = false;
  }
};
const handleClick = () => {
  imageRef.value.showPreview();
};
/**
 * 重置
 */
const close = () => {
  submitForm.value = {};
};
getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />

    <el-card>
      <p-button
        :list="buttonList"
        @add="addDic"
        @remove="remove"
        @export="state.isShow = true"
      />
      <!-- 表格数据 -->
      <p-table
        class="tableClass"
        keyId="id"
        :loading="state.loading"
        :data="tableData"
        :column="columns"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #columnCell="{ column, record }">
          <p-dictTag
            v-if="column.prop == 'status'"
            :options="self_examination_statsus"
            :value="record.status"
          />
          <p-Text
            v-if="column.prop == 'checkItem'"
            :options="temporary_inspect"
            :value="record.checkItem"
          />
          <p-Text
            v-if="column.prop == 'taskSource'"
            :options="task_source"
            :value="record.taskSource"
          />
          <p-Text
            v-if="column.prop == 'rectificationStatus'"
            :options="[
              { value: '1', label: '完成' },
              { value: '2', label: '提交整改措施' },
            ]"
            :value="record.rectificationStatus"
          />
          <p-Text
            v-if="column.prop == 'hiddenDangerType'"
            :options="hidden_dangers"
            :value="record.hiddenDangerType"
          />
          <div v-if="column.prop == 'imageUrls'">
            <el-image
              v-for="(item, index) in record.imageUrls"
              :key="index"
              ref="imageRef"
              :preview-src-list="record.imageUrls.map((t) => t.url)"
              style="width: 50px; height: 50px"
              :src="item.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              show-progress
              :initial-index="0"
              fit="cover"
            />
          </div>
        </template>
      </p-table>
    </el-card>

    <!-- 弹窗 新增-修改 -->
    <p-dialog
      v-model="state.isShow"
      :title="'导出'"
      @ok="handleExport()"
      @close="close"
      width="20%"
    >
      <el-radio-group v-model="state.radio">
        <el-radio label="1" size="large">全部导出</el-radio>
        <el-radio label="2" size="large">部分导出</el-radio>
      </el-radio-group>
    </p-dialog>
  </div>
</template>

<style scoped lang="scss">
.card-tree {
  height: 52.5rem;
  overflow: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
}
</style>